<template>
	<div class="mobile-watch">
		<mobile-player id="mobilePlayer" :height="playerHeight"></mobile-player>
		<div class="mobile-watch-container" :style="`height: ${containerHeight}px`">
			<van-tabs v-model:active="active" background="transparent" animated>
				<van-tab title="留言互动">
					<mobile-im :height="containerHeight - 44"></mobile-im>
				</van-tab>
				<van-tab title="直播介绍">
					<div class="mobile-tabs_content van-hairline--top" :style="`height: ${containerHeight}px`">
<!--						<Poster></Poster>-->
						<!-- <div v-if="detail && detail.remark">
							<div v-html="detail.remark"></div>
						</div> -->
						<van-image v-if="detail.posterImg" :src="`//${detail.posterImg}?imageMogr2/format/webp`"/>
						<el-empty v-else description="暂无介绍！" />
					</div>
				</van-tab>
			</van-tabs>
		</div>
		<!--彈窗-->
		<mobile-drawer />
	</div>
</template>

<script setup>
import MobilePlayer from './player.vue'
import MobileIm from './im.vue'
import MobileDrawer from './drawer.vue'
import Poster from '@/views/meeting/poster.vue'
import { ref, onMounted, computed, nextTick } from 'vue';
import { useStore } from 'vuex'

const active = ref(0);
const store = useStore();
const playerHeight = ref(0);
const containerHeight = ref(0);

const detail = computed(() => store.state.live.detail)

onMounted(() => {
	nextTick(() => {
		const { clientHeight, clientWidth } = document.body
		playerHeight.value = clientWidth / 10 * 5.623
		containerHeight.value = clientHeight - playerHeight.value
	})
})
</script>

<style lang="less">
.mobile-watch {
	width: 100vw;
	height: 100vh;
	background-color: var(--background-color, #383f54);
	--header-height: 52px;
	--im-container-height: 200px;
	--im-container-toolbar-height: 40px;
	--van-font-bold: 500;
	--van-tab-text-color: var(--tab-text-color, #8a9099);
	--van-tab-active-text-color: var(--tab-active-text-color, #fff);
	--van-tab-font-size: var(--tab-font-size, 16px);
	--van-tabs-bottom-bar-color: var(--tab-active-text-color, #fff);

	&-container {
		background-color: var(--aside-background-color, #383f54);
	}

	.mobile-tabs_content {
		box-sizing: border-box;
		padding: 20px;
		color: #fff;
		text-align: justify;
		word-break: break-all;
		font-size: 14px;
		overflow-y: auto;
	}
}
</style>
